<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box"></div>
    <script>

        /* 
        Proxy 代理器
        作用是在对象和对象的属性值之间设置治理，获取对象的值或者设置值、实例化等操作时，都会被拦截，经过这一层时可以统一处理
        鉴于defineProperty的缺点 vue3采用了Proxy
        */

        let box = document.querySelector('#box')
        // Proxy的使用
        let obj = {}
        // 创建 Proxy 实例  只有访问实例才能看到效果 不要去访问obj
        let proxy = new Proxy(obj, {
            // 两个参数 一个监听的对象 一个对象里的属性
            get(target , key ){
                console.log('get', target ,key);
                return target[key]
            },
            // 三个参数 第一个是监听的对象 第二个是修改的key  第三个修改的值
            set(target , key ,value){
                console.log('set' , target , key , value); // 这里成功拦截到  具体的操作再写一次
                target[key] = value
                if(key === 'data'){
                    box.innerHTML = value
                }
            }
        })
        /* 
        proxy.name
        //  get {} name
        proxy.name = "lrq"
        // set {} name lrq
        proxy.data = "lrq"
        // set {name: 'lrq'} data lrq
        */

    </script>
</body>
</html>